<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* 简化类名，确保基本选择器能匹配 */
        .product {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px;
            display: inline-block;
            width: 250px;
            border-radius: 5px;
        }
        .product img {
            max-width: 100%;
            height: 150px;
            object-fit: cover;
        }
        /* 其他样式保持不变 */
        .cart-icon {
            position: fixed;
            top: 10px;
            right: 20px;
            background: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            cursor: pointer;
        }
        .cart-count {
            background: red;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }
        /* 添加data属性以便更容易选择 */
        .add-to-cart {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        .add-to-cart:hover {
            background: #45a049;
        }
        .price {
            font-weight: bold;
            color: #e63946;
            font-size: 18px;
        }
        .nav {
            margin-bottom: 20px;
        }
        .nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="/">首页</a>
        <a href="/products">商品列表</a>
        <a href="/dashboard">个人中心</a>
    </div>

    <div class="cart-icon">
        购物车 <span class="cart-count" id="cart-count">0</span>
    </div>
    
    <h1>商品列表</h1>
    
    <div id="product-container">
        <!-- 确保这是第一个.product元素，以匹配:first-child选择器 -->
        <div class="product" data-testid="product-1">
            <img src="https://via.placeholder.com/250x150" alt="测试商品1">
            <h3>测试商品1</h3>
            <p class="price">¥99.00</p>
            <p>这是一个测试商品描述，用于自动化测试。</p>
            <button class="add-to-cart" data-testid="add-to-cart-1">加入购物车</button>
        </div>

        <div class="product" data-testid="product-2">
            <img src="https://via.placeholder.com/250x150" alt="测试商品2">
            <h3>测试商品2</h3>
            <p class="price">¥199.00</p>
            <p>这是另一个测试商品描述，用于自动化测试。</p>
            <button class="add-to-cart" data-testid="add-to-cart-2">加入购物车</button>
        </div>
    </div>

    <script>
        // 购物车功能
        const addToCartButtons = document.querySelectorAll('.add-to-cart');
        const cartCount = document.querySelector('.cart-count');
        let count = 0;
        
        addToCartButtons.forEach(button => {
            button.addEventListener('click', function() {
                count++;
                cartCount.textContent = count;
                // 移除alert，它会阻塞测试
                // alert('商品已添加到购物车！');
                console.log('商品已添加到购物车！');
            });
        });
    </script>
</body>
</html>